---
title: Fetching de datos
description: Aprenda como obtener datos remotos con Astro utilizando la API de fetch.
i18nReady: true
---

Los archivos `.astro` pueden obtener datos remotos para ayudarte a generar tus páginas.

## `fetch()` en Astro

Todos los [componentes de Astro](/es/basics/astro-components/) tienen acceso a la [función global `fetch()`](https://developer.mozilla.org/es/docs/Web/API/fetch) en su script de componente para hacer peticiones HTTP a APIs usando la URL completa (p.ej. https://example.com/api o `Astro.url + "/api"`).

Esta llamada a fetch será ejecutada en el momento de la compilación, y los datos estarán disponibles para la plantilla del componente para generar HTML dinámico. Si el modo [SSR](/es/guides/server-side-rendering/) está habilitado, cualquier llamada a fetch será ejecutada en tiempo de ejecución.

💡 Aprovecha el [**top-level await**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await#top_level_await) dentro del script del componente de Astro.

💡 Puedes pasar los datos obtenidos a los componentes de Astro u otros UI frameworks como props.

```astro /await fetch\\(.*?\\)/
---
// src/components/User.astro
import Contact from '../components/Contact.jsx';
import Location from '../components/Location.astro';

const response = await fetch('https://randomuser.me/api/');
const data = await response.json();
const randomUser = data.results[0]
---
<!-- Los datos obtenidos en la compilación pueden ser usados en el HTML -->
<h1>Usuario</h1>
<h2>{randomUser.name.first} {randomUser.name.last}</h2>

<!-- Los datos obtenidos en la compilación pueden ser pasados como props a otros componentes -->
<Contact client:load email={randomUser.email} />
<Location city={randomUser.location.city} />
```

:::note
Recuerda, todos los datos en los componentes de Astro se obtienen cuando se renderiza el componente.

Cuando tu proyecto de Astro es desplegado obtendrá los datos **una vez, en el momento de la compilación**. En desarrollo, verás el fetching de datos al actualizar los componentes. Si necesitas hacer fetching datos varias veces del lado del cliente, usa un [componente de framework](/es/guides/framework-components/) o un [script del lado del cliente](/es/guides/client-side-scripts/) en el componente de Astro.
:::


## `fetch()` en componentes de framework

La función `fetch()` también está disponible globalmente para cualquier [componente de framework](/es/guides/framework-components/):

```tsx title="src/components/Movies.tsx" /await fetch\\(.*?\\)/
import type { FunctionalComponent } from 'preact';

const data = await fetch('https://example.com/movies.json').then((response) =>
  response.json()
);

// Los componentes que se procesan en la compilación se registran en la CLI.
// Cuando se renderizan con una directiva client:*, se registran en la consola del navegador.
console.log(data);

const Movies: FunctionalComponent = () => {
// Envía el resultado a la página.
  return <div>{JSON.stringify(data)}</div>;
};

export default Movies;
```


### Consultas en GraphQL

Astro también puede usar `fetch()` para consultar a un servidor GraphQL con cualquier query de GraphQL válida.

```astro title="src/components/Film.astro" "await fetch"
---
const response = await fetch("https://swapi-graphql.netlify.app/.netlify/functions/index",
  {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({
      query: `
        query getFilm ($id:ID!) {
          film(id: $id) {
            title
            releaseDate
          }
        }
      `,
      variables: {
        id: "ZmlsbXM6MQ==",
      },
    }),
  });

const json = await response.json();
const { film } = json.data;
---
<h1>Obteniendo información sobre Star Wars: A New Hope</h1>
<h2>Título: {film.title}</h2>
<p>Año: {film.releaseDate}</p>
```

## Fetching de datos desde un Headless CMS

Los componentes de Astro pueden obtener datos desde tu CMS favorito y luego renderizarlos como contenido en tu página. Usando [rutas dinámicas](/es/guides/routing/#rutas-dinámicas), los componentes pueden generar páginas basadas en el contenido obtenido del CMS.

Ve nuestras [guías de CMS](/es/guides/cms/) para obtener más detalles sobre cómo integrar Astro con un headless CMS incluyendo Stroyblok, Contentful y WordPress.

## Recursos de la comunidad

- [Creando una app fullstack con Astro + GraphQL](https://robkendal.co.uk/blog/how-to-build-astro-site-with-graphql/)
